<template>
  <div class="container">
    <header class="header">
      <button class="back-button" @click="goBack">
        <el-icon><ArrowLeft /></el-icon>返回
      </button>
      <h1 class="title">萌宠</h1>
      <button class="add-button" @click="addPet">添加宠物</button>
    </header>

    <!-- 宠物选择 -->
    <select v-if="pets.length" v-model="selectedPetId" @change="fetchPetHealthData">
      <option value="" disabled>请选择宠物</option>
      <option v-for="pet in pets" :key="pet.id" :value="pet.id">{{ pet.name }}</option>
    </select>

    <!-- 卡片布局展示各项健康信息 -->
    <div class="card-container">
      <div class="card-title" @click="weight">
        <h3>体重</h3>
        <p>{{ selectedPetId ? healthData.weight + ' kg' : '暂无数据' }}</p>
      </div>
      <div class="card-title" @click="diet">
        <h3>饮食</h3>
        <p>{{ selectedPetId ? healthData.foodweight + ' g' : '暂无数据' }}</p>
      </div>
      <div class="card-title" @click="pee">
        <h3>尿便</h3>
        <p>{{ selectedPetId ? healthData.pee : '暂无数据' }}</p>
      </div>
      <div class="card-title" @click="health">
        <h3>健康</h3>
        <p>{{ selectedPetId ? healthData.health : '暂无数据' }}</p>
      </div>
      <div class="card-title" @click="clear">
        <h3>洗护</h3>
        <p>{{ selectedPetId ? healthData.clear : '暂无数据' }}</p>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <nav class="bottom-nav">
      <el-row justify="space-around" align="middle">
        <el-col :span="6">
          <el-button type="text" @click="goHome">
            <el-icon class="nav-icon"><House /></el-icon>
            首页
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="text" @click="goPetShop">
            <el-icon class="nav-icon"><Notebook /></el-icon>
            商品分类
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="text" @click="goPetRecords">
            <el-icon class="nav-icon"><Reading /></el-icon> 
            宠物信息
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="text" @click="goInformation">
            <el-icon class="nav-icon"><User /></el-icon>
            我的
          </el-button>
        </el-col>
      </el-row>
    </nav>
  </div>
</template>

<script setup>
import { ArrowLeft, Notebook, Reading, User, House } from "@element-plus/icons-vue";
import router from "@/router";
import axios from "axios";
import { ref, onMounted } from "vue";

// 健康数据相关
const healthData = ref({
  weight: null,
  foodweight: null,
  pee: null,      // Now directly stores human-readable label
  health: null,   // Now directly stores human-readable label
  clear: null,    // Now directly stores human-readable label
});
const loading = ref(false);

// 用户和宠物信息
const userId = ref(localStorage.getItem("userid") || "");
const pets = ref([]);
const selectedPetId = ref("");

// 路由跳转方法
const weight = () => router.push("/weight");
const diet = () => router.push("/diet");
const pee = () => router.push("/pee");
const health = () => router.push("/health");
const clear = () => router.push("/clear");
const goBack = () => router.push("/");
const addPet = () => router.push("/add");
const goHome = () => router.push("/");
const goInformation = () => router.push("/information");
const goPetShop = () => router.push("/petshop");

// 获取宠物列表
const fetchPets = async () => {
  if (!userId.value) {
    console.error("没有找到用户ID");
    return;
  }

  try {
    const result = await axios.get(`http://127.0.0.1:8000/pet/user/${userId.value}/`);
    pets.value = result.data.pets;
    if (pets.value.length) {
      selectedPetId.value = "";
    }
  } catch (err) {
    console.error("请求宠物列表失败:", err);
  }
};

// 获取宠物健康数据
const fetchPetHealthData = async () => {
  if (!selectedPetId.value) return;

  loading.value = true;
  try {
    const response = await axios.get(`http://127.0.0.1:8000/record/pets/${selectedPetId.value}/records/`);
    healthData.value = response.data;
  } catch (error) {
    console.error('获取健康数据出错:', error);
  } finally {
    loading.value = false;
  }
};

// 初始化数据
onMounted(() => {
  fetchPets();
});
</script>

<style scoped>
/* 基础样式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f7f8fa;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 2.2em;
  color: #333;
  text-align: center;
  flex-grow: 1;
}

.add-button, .back-button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.add-button:hover, .back-button:hover {
  background-color: #0056b3;
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.back-button {
  display: flex;
  align-items: center;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 20px 0;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.card-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1.1rem;
  color: #555;
  transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.card-title:hover {
  transform: translateY(-5px);
  background-color: #e6f7ff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.card-title h3 {
  margin: 10px 0;
}

.card-title p {
  font-weight: bold;
  color: #333;
}

select {
  padding: 10px;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  width: 100%;
  max-width: 300px;
  margin-bottom: 20px;
}
</style>
